<template>
	<view class="info">
		<view class="status_bar"></view>
		<view class="title">设备预览</view>
		
		<view class="uni-flex uni-column content">
			<view class="devices">
				<template v-for="device in devices">
					<collapse class="device" :title="getDeviceName(device)">
						<sensors :sensors="device.sensors"></sensors>
						<valves :valves="device.valves" :device="device" @change="valveChange"></valves>
					</collapse>
				</template>
			</view>
			<uni-load-more class="loading" :iconSize="32" color="#299384" :status="loading.status" :contentText="loading.contentText"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import {mapState, mapActions} from 'vuex';
	import collapse from '@/components/collapse.vue'
	import sensors from './components/sensors.vue'
	import valves from './components/valves.vue'
	import xph from '@/common/xph.js'
	export default {
		data() {
			return {
				loading:{
					status: 'noMore',
					contentText: 	{contentdown: "上拉显示更多设备",contentrefresh: "正在加载，请稍等...",contentnomore: "没有更多设备了"}
				}
			};
		},
		methods:{
			getDeviceName(device){
				return `${device.name}(${device.id})`
			},
			valveChange(valve, device){
				this.setDeviceRelayLoading({
						valve,
						state: true
					})
				xph.controlDeviceValve(device.id, valve.num, !valve.state).then(res => {
					this.setDeviceRelayLoading({
							valve,
							state: false
						})
					if(res){
						// valve.state = !valve.state
						this.setDeviceRelay({
							valve,
							state: !valve.state
						})
					} else {
						uni.showToast({
							title: '设备不在线',
							icon: 'error'
						})
					}
				}).catch(err => {
					uni.showToast({
						title:"网络异常",
						icon: 'error'
					})
				})
			},
			...mapActions('device', ['setDeviceRelay', 'setDeviceRelayLoading', 'setDeviceInfo'])
		},
		computed:{
			...mapState(['user']),
			...mapState({
				vxDevices: state => state.device.devices
			}),
			devices: {
				get(){
					return this.vxDevices;
				}
			}
		},
		components:{
			collapse,
			sensors,
			valves
		},
		onPullDownRefresh(){
			this.setDeviceInfo(this.user.username)
			setTimeout(uni.stopPullDownRefresh, 3000)
		},
	}
</script>

<style lang="scss" scoped>
.info{
	min-height: 100%;
	.title{
		margin-left: 28.13rpx;
		width: 280.18rpx;
		height: 51.58rpx;
		border: 1px solid #299384;
		border-left-width: 0;
		border-right-width: 0;
		border-radius: 11.72rpx;
		
		text-align: center;
		font-size: 33.99rpx;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: #299384;
		line-height: 51.58rpx;
	}
	.content{
		/* #ifndef H5 */
		min-height: calc(100vh - 100rpx);
		/* #endif */
		/* #ifdef H5 */
		min-height: calc(100vh - 150rpx);
		/* #endif */
		margin-top: 37.51rpx;
		align-items: center;
		flex-wrap: wrap;
		.devices {
			width: 90%;
			flex: 0.98;
			background: #F0FBF9;
			text-align: center;
		}
		.loading{
			align-self: center;
		}
	}
}
</style>
